<template>
	<div class="inputBox">
		<div class="inputLeft">{{names}}</div>
		<div class="inputRight"><input type="text" :value="val" :placeholder="infor"></div>
		<button v-if="!againShow" class="btn" v-show="isShow" @click="getDTime">获取验证码</button>
		<button v-else class="btn btn1" v-show="isShow">重新获取({{Time}})</button>
	</div>
</template>

<script>
	export default{
		props:['names','infor','isShow','againShow','Time','val','getTime'],
		methods:{
			getDTime(){
				return this.getTime()
			}
		}
	}
</script>

<style scoped>
	.inputBox{
		position: relative;
		width: 100%;
		height: 53px;
		border-bottom:1px solid #CCD6E3;
		font-size: 14px;
		background: #fff;
	}
	.inputLeft{
		width: 30%;
		padding-left: 5%;
		height: 100%;
		float: left;
		line-height: 53px;
		color:#333333;
	}
	.inputRight{
		width: 65%;
		height: 100%;
		line-height: 53px;
		color:#CCD6E3;
		float: right;
	}
	.inputRight input{
		display: inline-block;
		width: 100%;
		height: 50px;
		line-height: 53px;
		color:#CCD6E3;
		float: right;
		border:none;
		outline: 0;
	}
	.btn{
		display: inline-block;
		width: 84px;
		height: 27px;
		position: absolute;
		right:15px;
		top:14px;
		background: #fff;
		border:1px solid #333333;
		outline: 0;
	}
	.btn1{
		font-size: 12px;
	}
</style>
